<template>
  <div class="home">
    <home-header></home-header>
    <home-swiper :swiperList='swiperList'></home-swiper>
    <home-icons :iconsList='iconsList'></home-icons>
    <home-location></home-location>
    <home-active></home-active>
    <home-hot></home-hot>
    <home-like :liskList='liskList'></home-like>
    <home-vacation></home-vacation>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import HomeHeader from './pages/Header';
import HomeSwiper from './pages/Swiper';
import HomeIcons from './pages/Icons';
import HomeLocation from './pages/Location';
import HomeActive from './pages/Active';
import HomeHot from './pages/Hot';
import HomeLike from './pages/Like';
import HomeVacation from './pages/Vacation';
export default {
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeLocation,
    HomeActive,
    HomeHot,
    HomeLike,
    HomeVacation,
  },
  data() {
    return {
      swiperList: [],
      iconsList: [],
      liskList: [],
      homeCity:''
    }
  },
  computed: {
    ...mapState(['city'])
  },
  methods: {
    getHtttp() {
      this.$http.get("/api/dataHome.json").then((res) => {
        const data = res.data.data;
        data.forEach((item, index) => {
          if (item.city == this.city) {
            this.swiperList = item.swiperList;
            this.iconsList = item.iconsList;
            this.liskList = item.liskList;
          }
        })
      })
    }
  },
  mounted() {
  	this.homeCity = this.city;
  	this.getHtttp();
  },
  activated(){
  	if(this.homeCity != this.city){
  		this.getHtttp();
  		this.homeCity = this.city;
  	}
  }
}

</script>
<style scoped="">
.home {
  background: #f5f5f5;
}

</style>
